<template >
    <div :id="`video_container_${index}`" class="video_container"></div>
  </template>
  <script>
  import { TcPlayer } from 'tcplayer'
  export default {
    name: 'Cviewplayer',
    props: {
        //默认监控图片
        Defaultimage: { type: String, default: '' },
        //视频的url
        videoUrl: { type: String, default: '' },
        //视频的坐标，用于判断div的id赋值到对应的容器
        index: { type: Number, default: 0 },
        //是否播放
        isPlay: { type: Boolean, default: false },
    },
    data() {
        return {
            player: [],
            poster: '' /* 视频封面 */,
        }
    },
    created() {
        // this.$nextTick(() => {
        //   this.initPlayer()
        // })
    },
    watch: {
        isPlay() {
            this.$nextTick(() => {
            if (this.isPlay) {
                this.play()
                this.$emit('PlayClose', false)
            }
            })
        },
    },
    methods: {
        initPlayer() {
        if (this.player.length) {
          this.player.forEach((item) => {
            item.destroy()
          })
          this.player = []
        }
        var options = {
            //视频地址
          m3u8: this.videoUrl,
          flv: this.videoUrl,
          //是否自动播放
          autoplay: false,
          preload: true,
          //暂停时视频封面
          poster: { style: 'cover', src: this.Defaultimage },
          coverpic: this.Defaultimage,
          // live: live,
          width: '100%',
          height: '100%',
          x5_player: true,
          x5_type: 'h5-page',
          x5_fullscreen: true,
          wording: {
            1: '网络错误，请检查网络配置或者播放连接是否正确',
            1002: '即将开始，请稍等',
            2032: '请求视频失败，请检查网络',
            2048: '请求m3u8文件失败，多是网络错误或者跨域问题',
          },
          flash: false, //是否优先使用 flash 播放视频
          pausePosterEnabled: true /* 暂停时显示封面 默认为true */,
          listener: (msg) => {
            if (msg.type == 'load') {
              //加载完事件
              // this.player.play()
            }
            if (msg.type == 'ended') {
              //播放完成事件
              // this.player[this.index].close()
            }
            // 播放失败，重新连接
            if (msg.type == 'error') {
              setTimeout(() => {
                if (this.player[this.index]?.options.src == undefined) return false
                this.player[this.index]?.load() // 重连
              }, 4000)
            }
          },
        }
        // 初始化
        this.player.push(new TcPlayer('video_container_' + this.index, options))
      },
      // 播放或暂停
      play() {
        if (this.player.length) {
          this.player.forEach((item) => {
            //如果没有地址则跳过
            if (item.options.src == undefined) return false
            item?.play()
          })
        } else {
          this.$message.warning('暂无视频播放源，请检查设置')
        }
      },
    },
  }

</script>
<style scoped>
    .video_container {
        /* width: 100%;
        height: 100%; */
    }
    .vcp-error-tips {
      padding-top: 66px;
    }
</style>